<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>message: {{ message }}</div>
    <div>反转: {{ message.split('').reverse().join('') }}</div>
    <div>reversed: {{ reversed }}</div>

    <button @click="message = '你好'">修改</button>

    <div v-for="n in 6">reversedMessage: {{ reversedMessage }}</div>
    <div v-for="n in 6">方法: {{ reversedMsg() }}</div>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          message: 'Hello Vue3.x'
        }
      },
      // 计算属性
      computed: {
        // 将 message 字符串数据反转
        // 这是一种简写，是 getter() 方法的简写
        // 计算属性会基于其响应式依赖进行缓存：当依赖项发生变化时，才会重新计算并缓存新的值
        reversedMessage() {
          console.log('调用计算属性...')
          return this.message.split('').reverse().join('')
        },
        // getter
        reversed: {
          get() {
            return this.message.split('').reverse().join('')
          },
        },
        // setter 用于设置计算属性（可写的）
        // 通常设置计算属性值，是修改其依赖项数据
        reversed2: {
          set(val) {
            this.message = val
          }
        },
      },
      methods: {
        // 将 message 字符串数据反转
        reversedMsg() {
          console.log('调用方法...')
          return this.message.split('').reverse().join('')
        },
      },
    }).mount('#app')
  </script>
</body>
</html>